<!-- 平台通知设置 -->
<template>
  <div class="platformNoticeSet sys-content">
    <page-mod title="设置" icon="Setting">
      <el-card>
        <div class="query-box">
          <div class="title">通知设置</div>
          <div class="btns">
            <el-button icon="Plus" color="#FFB800" @click="show = true">新增</el-button>
          </div>
        </div>
      </el-card>
    </page-mod>
    <page-mod title="平台通知设置数据" icon="Histogram" :showBtn="false" :padBottom="false">
      <el-card v-loading="loading" element-loading-text="拼命加载中">
        <div class="data-list-box">
          <div class="data-list-item" v-for="(item, index) in dataList" :key="item.id">
            <div class="header">
              <div class="title">{{ item.title }}</div>
              <el-button type="danger" icon="Delete" @click="doDelete(index)">删除设置</el-button>
            </div>
            <div class="content">
              <el-form label-position="right" label-width="100px">
                <el-form-item label="业务类型:">
                  <span>{{ item.type }}</span>
                </el-form-item>
                <el-form-item label="通知接收人:">
                  <el-button type="primary" icon="Plus" @click="innerShow = true">选择平台用户</el-button>
                  <el-table :data="item.users" max-height="493" border>
                    <el-table-column label="序号" type="index" align="center" width="60"/>
                    <el-table-column label="用户名称" prop="username" align="center"></el-table-column>
                    <el-table-column label="编号" prop="code" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="80">
                      <template #default="{$index}">
                        <el-button type="danger" icon="Delete" link @click="doDeleteUser(item.users, $index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-card>
    </page-mod>

    <el-dialog v-model="show" title="新增通知设置" top="5vh" width="40%" center draggable @close="resetForm">
      <el-form ref="formRef" :model="form" :rules="rules" size="default" label-width="100px">
        <el-form-item label="业务类型:" prop="type" required>
          <el-select v-model="form.type" placeholder="请选择业务类型" clearable>
            <el-option label="积分提现申请" :value="1"/>
            <el-option label="订单申请退款" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="通知接收人:" prop="users" required>
          <el-button type="primary" icon="Plus" @click="innerShow = true">选择平台用户</el-button>
          <el-table :data="form.users" max-height="493" border>
            <el-table-column label="序号" type="index" align="center" width="60"/>
            <el-table-column label="接收者类型" prop="type" align="center"></el-table-column>
            <el-table-column label="用户名称" prop="name" align="center"></el-table-column>
            <el-table-column label="编号" prop="code" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="80">
              <template #default="{$index}">
                <el-button type="danger" icon="Delete" link @click="form.users.splice($index, 1)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" size="default" @click="doSubmit">保存</el-button>
        <el-button size="default" @click="show = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="innerShow" title="选择接收人" top="10vh" width="65%" center draggable>
      <div class="search-box">
        <el-form :model="query" inline size="default">
          <el-form-item label="手机号:">
            <el-input v-model="query.phone" placeholder="请输入手机号" clearable style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="query.email" placeholder="请输入邮箱" clearable style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="角色:">
            <el-select v-model="query.roleId" placeholder="请选择角色" clearable style="width: 200px;">
              <el-option label="超级管理员" :value="1"/>
              <el-option label="财务" :value="2"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btns">
          <el-button icon="Search" color="#16b777" @click="loadUser(1)">查询</el-button>
          <el-button icon="Plus" color="#FFB800" @click="doChoose">选择</el-button>
          <el-button icon="Refresh" color="#FF5722" @click="resetSearch(false)">重置</el-button>
        </div>
      </div>
      <el-table ref="tableRef" :data="userList" max-height="493" border>
        <el-table-column type="selection" align="center" width="100" />
        <el-table-column label="用户编号" prop="code" align="center"></el-table-column>
        <el-table-column label="用户名称" prop="name" align="center"></el-table-column>
        <el-table-column label="登录账号" prop="zhanghao" align="center"></el-table-column>
        <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
        <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
      </el-table>
      <el-pagination 
        class="paging"
        v-show="query.total"
        small
        layout="total, sizes, prev, pager, next, jumper" 
        :current-page="query.current" 
        :page-size="query.size"
        :total="query.total"
        @current-change="loadUser"
        @size-change="sizeChange">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script setup name="platformNoticeSet">
  import { ref, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties 
  const formRef = ref(null)
  const tableRef = ref(null)

  let loading = ref(false)
  let show = ref(false)
  let innerShow = ref(false)
  let query = ref({
    phone: '',
    email: '',
    roleId: '',
    current: 1,
    size: 20,
    total: 0
  })
  let form = ref({
    type: '',
    users: []
  })
  let rules = ref({
    type: [{ required: true, message: '请选择业务类型', trigger: ['blur', 'change'] }],
    users: [{ required: true, message: '请选择通知接收人', trigger: ['blur', 'change'] }]
  })
  let userList = ref([
    {id: 1, code: '11111', name: '李东', zhanghao: 'admin1', phone: '13608510001', email: '123465@qq.com', type: '平台用户'},
    {id: 2, code: '22222', name: '李广', zhanghao: 'admin2', phone: '13608510002', email: '1324789465@qq.com', type: '平台用户'},
    {id: 3, code: '33333', name: '李梅', zhanghao: 'admin3', phone: '13608510003', email: '5878499@qq.com', type: '平台用户'}
  ])
  let dataList = ref([])

  function load() {
    loading.value = true
    let timer = setTimeout(() => {
      let list = [{
        id: '1',
        title: '积分提现通知设定',
        type: '订单发货',
        users: [
          {uid: '11', username: '李冬', code: 'lidong123'},
          {uid: '12', username: '赵薇', code: 'zhaowei123'},
        ]
      }, {
        id: '2',
        title: '订单申请通知设定',
        type: '订单发货',
        users: [
          {uid: '21', username: '陈广大', code: 'chenguangda123'},
          {uid: '22', username: '谢伟楠', code: 'xieweinan123'},
        ]
      }]
      dataList.value = list
      loading.value = false
      console.log(dataList.value);
      clearTimeout(timer)
    }, 1200)
  }

  function loadUser(page) {
    query.value.current = page
  }

  function doSubmit() {
    formRef.value.validate((valid) => {
      if (valid) {
        currentThis.$messageBox.confirm(`确认${currentData.form.roleId ? '修改' : '新增'}吗？`).then(() => {
          let loading = currentThis.$loading(`正在${currentData.form.roleId ? '修改' : '新增'}`)
          saveOrUpdateRoleApi(`${currentData.form.roleId ? 'update' : 'save'}`, currentData.form).then(res => { // 修改
            loading.close()
            if(res.code === '200') {
              currentThis.$message.success(res.message)
              currentData.show = false
              if(currentData.form.roleId) {
                load(currentData.query.current)
              } else {
                load(1)
              }
            } else {
              currentThis.$message.error(res.message)
            }
          })
        }).catch(() => {})
      } else {
        return false;
      }
    })
  }

  function doDelete(index) {
    currentThis.$messageBox.confirm('确认删除吗？').then(() => {
      let loading = currentThis.$loading('删除中，请耐心等待')
      dataList.value.splice(index, 1)
      loading.close()
      // deleteRoleApi({ id: roleId }).then(res => {
      //   loading.close()
      //   if(res.code === '200') {
      //     currentThis.$message.success(res.message)
      //     load(currentData.query.current)
      //   } else {
      //     currentThis.$message.error(res.message)
      //   }
      // })
    }).catch(() => {})
  }

  function doDeleteUser(e, index) {
    currentThis.$messageBox.confirm('确认删除吗？').then(() => {
      let loading = currentThis.$loading('删除中，请耐心等待')
      e.splice(index, 1)
      loading.close()
      // deleteRoleApi({ id: roleId }).then(res => {
      //   loading.close()
      //   if(res.code === '200') {
      //     currentThis.$message.success(res.message)
      //     load(currentData.query.current)
      //   } else {
      //     currentThis.$message.error(res.message)
      //   }
      // })
    }).catch(() => {})
  }

  function doChoose() {
    let chooseUsers = tableRef.value.getSelectionRows()
    if(chooseUsers.length === 0) {
      currentThis.$message.error(`请勾选接收人`)
      return 
    }
    form.value.users = chooseUsers
    tableRef.value.clearSelection()
    innerShow.value = false
  }

  // 重置查询
  function resetSearch() {
    query.value.phone = ''
    query.value.email = ''
    query.value.roleId = ''
    loadUser(1)
  }

  function resetForm() {
    form.value = {
      type: '',
      users: []
    }
    formRef.value.resetFields()
  }

  // 分页每页显示条数改变执行
  function sizeChange(size) {
    query.value.size = size
    loadUser(1)
  }
  
  onActivated(() => {
    load()
  })
</script>

<style lang="less" scoped>
.platformNoticeSet{
  .data-list-box{
    max-height: 600px;
    overflow: hidden auto;
    .data-list-item{
      width: calc(100% - 2px);
      border: #3BB9F1 solid 1px;
      border-radius: 5px;
      &:not(:last-child){
        margin-bottom: 10px;
      }
      .header{
        padding: 5px 10px;
        background: #3BB9F1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          color: #ffffff;
        }
      }
      .content{
        padding: 10px 10px 0;
      }
    }
  }
  .el-table{
    margin-top: 10px;
  }
  :deep(.el-dialog){
    .el-dialog__body{
      max-height: 600px;
      overflow: hidden auto;
      .search-box{
        display: flex;
        justify-content: space-between;
        .el-input{
          width: 120px;
        }
        >.btns{
          width: 25%;
          text-align: right;
          >.el-button{
            color: #ffffff !important;
          }
        }
      }
    }
  }
}
</style>